<template>
  <mu-flex class="chatroom" direction="column" @paste="onPaste">
    <mu-flex class="container" direction="column">
      <chatroom-title :user="user"></chatroom-title>
      <chatroom-messages :messages="messages" @on-message-click="onMessageClick"></chatroom-messages>
      <chatroom-input
        v-model="message"
        @on-send="sendText"
        @on-image="imageSelectorOpen = true"
        @on-paste="onPaste"
      ></chatroom-input>
    </mu-flex>
    <mu-dialog :open.sync="imageSelectorOpen" transition="slide-bottom" class="mu-dialog-popup">
      <ww-image-selector action="发送" @on-close="imageSelectorOpen=false" @on-action="sendImage"></ww-image-selector>
    </mu-dialog>
  </mu-flex>
</template>
<script>
import ChatroomTitle from './ChatroomTitle'
import ChatroomMessages from './ChatroomMessages'
import ChatroomInput from './ChatroomInput'
export default {
  name: 'page-chatroom',
  components: {
    ChatroomTitle,
    ChatroomMessages,
    ChatroomInput,
  },
  data () {
    return {
      message: '',
      snackbar: { open: false, message: '', color: '' },
      alert: { open: false, message: '', color: '' },
      socket: null,
      imageSelectorOpen: false,
    }
  },
  computed: {
    user () {
      return this.$store.state.user
    },
    messages () {
      return this.$store.state.messages
    },
    messagesNum () {
      return this.$store.state.messages.length
    },
  },
  watch: {
    messagesNum (newV, oldV) {
      if (newV > oldV) {
        this.$nextTick(() => {
          var scrollDom = document.getElementById('messagelist')
          scrollDom.scrollTop = scrollDom.scrollHeight
        })
      }
    },
  },
  methods: {
    addMessage (message) {
      this.$store.commit('ADD_MESSAGE', message)
    },
    sendText (message) {
      if (!this.$sio.socket.connected) {
        this.addMessage({ user: 'system', message: '已离线！' })
      } else {
        if (!this.message) return
        this.$sio.sendMessage(this.user, message)
        this.message = ''
      }
    },
    sendImage (image) {
      if (!this.$sio.socket.connected) {
        this.addMessage({ user: 'system', message: '已离线！' })
      } else {
        if (!image) return
        this.$sio.sendMessage(this.user, '[图片]', 'image', image)
      }
    },
    async onPaste (e) {
      try {
        await navigator.permissions.query({ name: 'clipboard-read' })
        var res = await navigator.clipboard.read()
        if (!res.length) return
        var type = res[0].types[0]
        if (type.slice(0, 6) !== 'image/') return
        res = await res[0].getType(type)
        this.sendImage(res)
      } catch (err) {}
    },
    onMessageClick (id) {
      if (this.messages[id].data.dtype === 'image') {
        this.$bus.$emit('ww-image-view', this.messages[id].data.data)
      }
    },
  },
}
</script>
<style lang="less" scoped>
.chatroom {
  height: 100%;
  width: 100%;
  position: absolute;
  overflow: hidden;
  & > .container {
    height: 100%;
  }
  .container {
    max-width: 800px;
  }
}
</style>
